import Form from "antd/es/form/Form";
import TextArea from "antd/es/input/TextArea";
import Radio from "antd/es/radio/radio";
import './CheckItem.scss'
import { useEffect, useState } from "react";

export default function CheckItem({ info,opEditModel }) {
    const [choicesList, setChoiceList] = useState([]);
    const [blankList, setBlankList] = useState([]);
    const [answerList, setAnswerList] = useState([]);


    const checkLabel = <div
        className="check-label"
    >
        <span>
            {`${info.id + 1}.  `}
        </span>
        <span>
            {info.exe_name}
        </span>
    </div>;


    useEffect(() => {
        // console.log(info);
        if (info.exe_type === '选择  ') {
            setChoiceList(Object.keys(info.exe_choices).map(ele => ({
                key: ele,
                element: info.exe_choices[ele]
            })))
        }

        if (info.exe_type === '填空  ') {
            setBlankList(Array(info.exe_blank_num).fill(''));
            setAnswerList(info.exe_answer.split(' '));
        }

    }, [])



    return (
        <>
            <Form.Item
                className="check-item"
                label={checkLabel}
                name={info.exrcise_id}

            >
                {info.exe_type === '选择  ' ? (<>
                    <Radio.Group
                        className="check-radio-group"
                    >
                        {choicesList.map((ele, index) => <Radio
                            className="check-radio"
                            key={index}
                            value={ele.key}
                        >
                            {`${ele.key}: ${ele.element}`}
                        </Radio>)}
                    </Radio.Group>
                    <div className="answer">
                        正确答案：
                        {info.exe_answer}
                    </div></>) :
                    (<>
                        {blankList.map((ele, index) => <TextArea
                            key={index}
                            name={index}
                            className="check-input"
                            placeholder={`第${index + 1}空作答区域`}
                            autoSize
                        />)}
                        <div className="answer">
                            正确答案：
                            {answerList.map((ele, index) => <div key={index}>{index + 1}. {ele}</div>)}
                        </div>
                    </>)
                }
                <button onClick={()=>{
                    opEditModel(info.exercise_id);
                }}>编辑此题</button>
            </Form.Item>
        </>
    )

}